<template>
  <div class="chart-item-container">
    <div ref="chartRef" class="chart-item"></div>
  </div>
</template>

<script lang="ts">
  import useEcharts from '@/hooks/useEcharts';
  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
  import { dispose } from 'echarts';
  import { object } from 'vue-types';

  export default defineComponent({
    name: 'AbnormalMovementChart',
    props: {
      dataModel: {
        type: Array || object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const last = ref<any>({
        bytesSent: '0B',
        bytesRecv: '0B',
        down: '0',
        up: '0',
      });
      let data = props.dataModel?.data.data1.data.candle['000001.SS'];
      let list = data.lines;
      let echartData = [];

      list.forEach((item: any) => {
        let now = new Date(item[0] * 1000);
        echartData.push([+now, item[1]]);
      });
      let option = ref({
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          },
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [1, 1],
          min: function (value) {
            return value.min - 5;
          },
          max: function (value) {
            return value.max + 5;
          },
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: '上证指数',
            type: 'line',
            symbol: 'none',
            areaStyle: {},
            data: echartData,
            markPoint: {
              symbolSize: 10,
              symbol: 'circle',
              data: [
                {
                  coord: [9, 2],
                },
              ],
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    if (params.dataIndex === 8) {
                      return '{b}';
                    }
                  },
                },
              },
            },
            // markPoint: {
            //   symbol: 'circle',
            //   symbolSize: 1000,
            //   data: [
            //     {
            //       name: '某个坐标',
            //       yAxis: '1713949400000',
            //       xAxis: '3059.0649',
            //       // value: '', //1200,200
            //       _value: '1713749400000, 3059.0649',
            //       label: {
            //         show: true,
            //         position: 'top',
            //         color: 'red',
            //       },
            //     },
            //   ],
            // },
          },
        ],
      });

      const chartRef = ref<HTMLDivElement | null>(null);

      onBeforeUnmount(() => {
        if (chartRef.value !== null) {
          dispose(chartRef.value as HTMLDivElement);
        }
      });
      onMounted(() => {
        setTimeout(() => {
          nextTick(() => useEcharts(chartRef.value as HTMLDivElement).setOption(option.value));
        }, 10);
      });
      return {
        chartRef,
        last,
      };
    },
  });
</script>

<style scoped>
  .chart-item-container {
    width: 100%;

    .chart-item {
      height: 200px;
    }
  }

  .light-green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.12);
  }

  .green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.24);
  }
</style>
